Skip to main content

가상 클래스 선택자(pseudo selectors)

동적 가상 클래스​

  • 아직 방문하지 않은 상태(최초 한번도 방문 안한 것)

:visited​

  • 이미 방문한 상태

:hover​

  • hover기능을 구현 한 부분에 마우스를 올리면 이벤트 발생

:active​

  • 마우스를 클릭하면 이벤트를 발생

:focus​

  • 현재 보고 있는 초점

구조적 가상 선택자​

:first-child​

  • 형제 중 제일 첫번째 요소

:last-child​

  • 형제 중 제일 마지막 요소

:nth-child​

  • odd,even과 같이 홀,짝 표현이 가능하지만 숫자도 가능하다.
  • 매개변수가 들어간 문장도 가능하다. ex) 2n + 3, 5n + 1

:nth-of-type​

  • 형제 중 위치 기반

only-of-type​

  • 동일한 유형 형제 없이 유일하게 사용된 태그(무조건 단 한개인 태그)

:not​

  • 부정 선택자(반대를 선택)

:root​

  • :root: --와 속성의 이름을 작성하고, 속성값을 작성한다.
    • :root에 선언된 속성을 이용할 시, var(:root에 생성한 속성명)으로 값을 호출한다.
:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}

.h1{
    color: var(--main-color)
    padding: var(--pane-padding)
}

가상 요소(::)​

  • 선택자에 추가하는 키워드
  • 특정 요소에만 가능
caution

<img>, <br>, <input>, <button>, <form>에는 가상요소가 적용되지 않는다.

::after 와 ::before​

  • 선택한 요소에만 자식이 생성
  • content:""를 작성해야지 화면 표현이 가능하다.
p::after {
  content: "안녕하세요";
}
p::before {
  content: "안녕히가세요";
}
<body>
  <p>준홍님!</p>
</body>
<!-- 결과는 안녕하세요준홍님!안녕히가세요 이다.
즉, 가상의 태그를 만들어 before은 p태그의 앞에, after은 p태그 뒤에 요소가 추가된다.
 -->

::placeholder​

  • 자리표시자, (input, textarea)요소에 정보를 제공